<template>
  <el-dialog v-model="dialogFormVisible" :title="title" width="640" style="top: 100px">
    <el-form ref="userPwdFormRef" :model="form" :rules="rules" style="margin-left: 80px">
      <el-form-item label="密码" :label-width="100" required prop="password">
        <el-input v-model="form.password" autocomplete="off" maxlength="16" placeholder="请输入密码" style="width: 300px;"/>
      </el-form-item>
      <el-form-item label="确认密码" :label-width="100" required prop="confirmPassword">
        <el-input v-model="form.confirmPassword" autocomplete="off" maxlength="16" placeholder="请输入确认密码" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="" :label-width="100">
        <div style="color: red;font-size: 14px">默认密码是：123456</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" style="text-align: center;margin-top: -30px">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleResetPwd">
          修改密码
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {kvaMessage} from "@/utils/kvaMessage.js";
import {ResetSysUserPwd} from "@/api/sysUser.js"

// 弹窗标题
const title = ref("重置密码")
// 弹窗属性
const dialogFormVisible = ref(false)
// 弹窗导出属性
const userPwdFormRef = ref()
// 定义用户的属性
const user = ref()

// 定义容器属性
const form = reactive({
  userId:0,
  password:'',
  confirmPassword:''
})

// 校验规则rules
const rules = reactive({
  "password":[{required:true,message:"请输入密码", trigger: 'blur'}],
  "confirmPassword":[{required:true,message:"请输入确认密码", trigger: 'blur'}]
})

// 打开弹窗
const handleOpen = (row)=>{
  user.value = row
  form.userId = row.id
  title.value = "正在修改的用户是：【"+ user.value.username+"】"
  dialogFormVisible.value = true
}

// 修改密码的点击事件
const handleResetPwd = async () => {
  // 判断两次密码是否一致
  if (form.password != form.confirmPassword){
    kvaMessage.error("两次密码输入不一致！")
    return
  }

  // 校验输入的合法性
  userPwdFormRef.value.validate(async(valid,fields)=>{
    if(valid){
      // 调用修改密码的方法
      await ResetSysUserPwd(form)
      kvaMessage.notifySuccess("密码修改成功！")
    }
  })

}


// 导出组件
defineExpose({
  handleOpen
})
</script>

<style scoped lang="scss">

</style>
